<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="zh-cn">
<head>
    <meta content="云之讯,云通讯,云通讯平台" name="keywords"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>短信云平台运营系统 - 客户财务</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link th:href="@{/resources/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/resources/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet"><!-- jqgrid-->
    <link th:href="@{/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css}" rel="stylesheet">
    <link th:href="@{/resources/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/resources/css/style.min862f.css?v=4.1.0}" rel="stylesheet">
    <link th:href="@{/resources/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <link th:href="@{/resources/css/inputNumber.css}" rel="stylesheet">
    <style>
        /* Additional style to fix warning dialog position */
        body{
            width:1310px;
        }
        #alertmod_table_list_2 {
            top: 900px !important;
        }
        .close{
            opacity: 1;
        }
        .modal-content{
            opacity: 1 !important;
            border:none;
        }
        .col-price{
            color:red;
        }
        .confirm-table{
            box-sizing:border-box;
            padding:20px;
        }
        .grid-inputNumber{
            width:120px;
            display: inline-block;
        }
        *{
            box-sizing: border-box;
        }
        .body-wrap{
            position: relative;
            width:100%;
            height:100%;
        }
        .grid-bottom{
            width:100%;
            left:0;
            bottom:0;
            z-index:100;
            padding:0 25px;
            background-color: #FFF;
        }
    </style>
</head>
<body class="gray-bg"><div th:replace="stat :: statCode"></div>
<div class="container-fluid body-wrap">
    <div class="row" style="height:100%;">
        <div class="col-sm-12">
            <div class="ibox ">
                <!-- 搜索条件 -->
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <form role="form" class="form-inline" id="mainForm" onkeydown="if(event.keyCode==13)return false;">
                                <div class="form-group">
                                    <label for="product_type">产品类型:</label>
                                    <select id="product_type" class="form-control" name="product_type">
                                        <option value="">所有</option>
                                        <option value="3">验证码</option>
                                        <option value="4">通知</option>
                                        <option value="1">会员营销</option>
                                        <option value="0">行业</option>
                                        <option value="2">国际短信</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="operator_code">运营商类型:</label>
                                    <select id="operator_code" class="form-control" name="operator_code">
                                        <option value="">所有</option>
                                        <option value="0">全网</option>
                                        <option value="1">移动</option>
                                        <option value="2">联通</option>
                                        <option value="3">电信</option>
                                        <option value="4">国际</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input type="text" placeholder="产品名称/产品代码" id="condition" name="condition" class="form-control" style="width:310px">
                                </div>
                                <div class="form-group">
                                    <span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-danger" onclick="search()">搜索</button></span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="ibox-content" id="grid-radio">
                    <div class="jqGrid_wrapper">
                        <table id="table_list"></table>
                        <div id="pager_list"></div>
                    </div>
                    <div style="text-align: right;" class="grid-bottom">
                        <span>合计（元）：<span class="js-table-total" style="color:#1ab394;margin-right:10px;">0.0000</span></span>
                        <a href="javascript:;" class="btn btn-md btn-primary js-reback">提交订单</a>
                    </div>
                    <p>&nbsp;</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display: none;" id="confirm-table" class="confirm-table">

</div>

<script th:src="@{/resources/js/plugins/layer/laydate/laydate.js}"></script>
<script th:src="@{/resources/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/resources/js/auth.js}"></script>
<script th:src="@{/resources/js/bootstrap.min.js?v=3.3.6}"></script>
<script th:src="@{/resources/js/content.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/layer/layer.js}"></script>
<script th:src="@{/resources/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/i18n/grid.locale-cn.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/resources/js/date_format.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/resources/js/common.js?v=1.1.0}"></script>
<script th:src="@{/resources/js/grid-radio.js?v=1.1.1}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function(){
        var agentId = getQueryString("agentId");
        var _tableInit = false;
        //初始化表格
        $.jgrid.defaults.styleUI = "Bootstrap";
        var initdata = {
            agentId : agentId
        }

        $("#table_list").jqGrid({
            url:/*[[@{/product/oem/products}]]*/,
            mtype: 'POST',
            datatype: "json",
            postData:{agentId: agentId},
            jsonReader : {
                root:"entityList",
                page: "currentPage",
                total: "totalPage",
                records: "totalCount"
            },
            height: 'auto',
            width:'100%',
            rownumbers:true,
            autowidth: true,
            shrinkToFit: false,
            autoScroll: true,
            multiselect : true,
            colNames: [ "产品id","产品名称", "产品代码","产品类型", "运营商", "区域", "短信价格", "折后价格", "到期时间","数量","金额（元）"],
            colModel: [
                {name: "productId",align: "left",sortable:false,hidden:true},
                {name: "productName",align: "left",sortable:false},
                {name: "productCode", align: "left",sortable:false},
                {name: "productTypeStr", align: "left",sortable:false,width:60},
                {name: "operatorCodeStr", align: "left",sortable:false,width:60},
                {name: "areaCodeStr", align: "left",sortable:false,width:60},
                {name: "unitPriceStr", align: "left",sortable:false},
                {name: "discountPriceStr", align: "left",sortable:false,
                    formatter:function(cellvalue, options, rowObject){
                        var productType = rowObject.productType;
                        var switcher = "";
                        if(productType == 2){
                            switcher = '<span class="unit" data-price="'+ rowObject.discountPriceStr.substring(4) +'">' + rowObject.discountPriceStr + '</span>';
                        } else {
                            switcher = '<span class="unit" data-price="'+ rowObject.discountPriceStr +'">' + rowObject.discountPriceStr + "元" + '</span>';
                        }

                        return switcher;
                    }
                },
                {name: "dueTimeStr", align: "left",sortable:false},
                { align: "left",sortable:false,
                    formatter : function(ellvalue, options, rowObject){
                        var productType = rowObject.productType, unit;
                        if(productType == 2){
                            unit = "元"
                        } else {
                            unit = "条"
                        }
                        var switcher = "<div class='grid-inputNumber js-table-number'>" +
                            "<span class='sub js-table-sub' data-remain='9999999'>-</span>" +
                            "<input type='text' class='num js-table-input' value='1' old='1' data-remain='9999999' data-arr='"+ JSON.stringify(rowObject) + "' >" +
                            "<span class='add js-table-add' data-remain='9999999'>+</span>" +
                            "</div>" + unit;
                        return switcher;
                    }
                },
                {align: "left",sortable:false,width:120,
                    formatter : function(ellvalue, options, rowObject){
                        var productType = rowObject.productType, now_price;
                        if(productType == 2){
                            now_price = (rowObject.discountPriceStr.substring(4)*1).toFixed(4);
                        } else {
                            now_price = (rowObject.discountPriceStr*1).toFixed(4);
                        }
                        var switcher  = '<span class="price col-price">'+ now_price +'</span>';

                        return switcher;

                    }
                }
            ],
            viewrecords: true,
            hidegrid: false,
            rowNum : 10,
            pager: "#pager_list",
            gridComplete:function(){
                if(!_tableInit){
                    _tableInit = true;
                    $("#grid-radio").countTable("#table_list");

                }
                $(".js-table-total").text("0.0000")
            },
            onSelectAll: function(){
                total();
            },
            onSelectRow : function(){
                total();
            }
        });

        //合计
        function total(){
            var total = 0;
            $("#table_list").find("input[type=checkbox]:checked").each(function(){
                var num = $(this).closest("tr").find(".num").val(),
                    unit = $(this).closest("tr").find(".unit").data("price");

                var t = num * unit;
                total += t;
            })
            $(".js-table-total").text(total.toFixed(4));
        }
        var params = {
            purchaseList : [],
            agentId:agentId
        }
        $(".js-reback").click(function(){
            var arr_commit = [];
            $("#table_list").find("input[type=checkbox]:checked").each(function(){
                var input = $(this).closest("tr").find(".num");
                var num   = input.val();
                var row = input.data("arr");
                var obj = {};
                obj.productId = row.productId;
                obj.purchaseNum = num;
                arr_commit.push(obj);
            })
            params.purchaseList = arr_commit;
            if(params.purchaseList.length == 0){
                layer.msg("请选择产品",{icon:2})
                return;
            }
            $.ajax({
                url:'/agentInfo/submitOrder',
                type:'POST',
                dataType:'json',
                contentType : 'application/json',
                data:JSON.stringify(params),
                success : function(res){
                    if(res.code != 0){
                        layer.msg(res.msg,{icon:2})
                        return;
                    }
                    var _p = parent;
                    parent.layer.msg(res.msg, {icon: 1,time: 1500},function(){
                        _p.location.reload();
                    });

                }
            })


        })
    })
    function search() {
        $("#table_list").jqGrid('setGridParam',{
            datatype:'json',
            postData: {
                condition: $("#condition").val(),
                productType: $("#product_type").val(),
                operatorCode: $("#operator_code").val()
            }, //发送数据
//            page:1
        }).trigger("reloadGrid"); //重新载入
    }
    function keyUp(e) {
        var currKey=0,e=e||event;
        currKey=e.keyCode||e.which||e.charCode;
        var keyName = String.fromCharCode(currKey);
        if (currKey == 13){
            search();
        }
    }
    document.onkeyup = keyUp;
    /*]]>*/
</script>

</body>
</html>